<template>
    <div class="content">
        <el-menu :default-active="offerType" @select="changeOfferType" mode="horizontal" class="offerType">
            <el-menu-item index="hangkou">行口报价</el-menu-item>
            <el-menu-item index="huokuan">货款报价</el-menu-item>
        </el-menu>
        <el-row class="filter_btn">
            <el-col :span="16">
                <el-col :span="2" class="title hpx-label">
                    报价列表
                </el-col>
                <el-button type="primary" size="small" class="add_new_offer" v-if="offerType == 'hangkou'" @click="newOffer(1)">
                    <i class="iconfont icon-tianjia"></i> 新建行口报价
                </el-button>
                <el-button type="primary" size="small" class="add_new_offer" v-if="offerType == 'huokuan'" @click="newOffer(2)">
                    <i class="iconfont icon-tianjia"></i> 新建货款报价
                </el-button>
            </el-col>
            <el-col :span="2" :offset="6" class="delete hpx-red-tips" v-if="offerType == 'huokuan'">
                <el-button type="danger" size="small" @click="remove()" :disabled="sectionArr.length == 0 && isSelect"><i class="iconfont icon-shanchu"></i> 删除</el-button>
                <el-button type="text" @click="cancelCheck" v-if="isSelect">取消</el-button>
            </el-col>
        </el-row>
        <div v-if="offerType == 'hangkou' && offerList.length == 0" class="no_offer">今日暂无报价记录</div>
        <div v-if="offerType == 'hangkou' && offerList.length != 0">
            <div class="offer_block" v-for="offer in offerList" :key="offer.index">
                <el-row class="basic_info">
                    <div class="item"><label class="label">报价时间: </label><span class="value">{{offer.offerTime}}</span></div>
                    <div class="item"><label class="label">票据类型: </label><span>{{offer.billType}}</span></div>
                    <div class="item"><label class="label">瑕疵可收: </label><span class="value">{{offer.billFlawId == 0 ? '不可' : '可'}}</span></div>
                    <div class="item"><label class="label">交易方式: </label><span class="value">{{offer.tradeType}}</span></div>
                    <span class="delete_offer">
                        <el-button type="primary" plain size="small" @click="editOffer(offer)">修改</el-button>
                        <el-button type="danger" plain size="small" @click="deleteOffer(offer)">
                            <i class="iconfont icon-shanchu"></i> 删除本次报价
                        </el-button>
                    </span>
                </el-row>
                <div class="term_interval" v-for="(item, index) in offer.pccOfferTimeDtos" :key="index">
                    <el-row class="term_title hpx-title-border">
                        <span class="title_text">期限区间: </span>
                        <span>{{item.startTime}}——{{item.endTime}}</span>
                        <span class="top_btn">
                            <el-button type="primary" plain size="small" @click="item.isShow = !item.isShow">
                                {{item.isShow ? '收起' : '展开'}} <i :class="[item.isShow ? 'el-icon-arrow-up' :'el-icon-arrow-down']"></i>
                            </el-button>
                        </span>
                    </el-row>
                    <el-row class="offer_detail" v-if="item.isShow">
                        <el-row class="table_header">
                            <el-col class="column">承兑机构</el-col>
                            <el-col class="column">票面金额(万元)</el-col>
                            <el-col class="column">贴现率(%)</el-col>
                            <el-col class="column">每十万加(元)</el-col>
                        </el-row>
                        <el-row class="table_body" v-for="detail in item.pccBillDetails" :key="detail.id">
                            <el-col class="column">{{detail.acceptorName}}</el-col>
                            <el-col class="column">{{detail.billPriceRegion}}</el-col>
                            <el-col class="column">{{detail.billRate}}</el-col>
                            <el-col class="column">{{detail.offerEveryPlus}}</el-col>
                        </el-row>
                    </el-row>
                </div>
            </div>
            <el-row class="pagination">
                <el-pagination
                    @current-change="change"
                    @size-change="changes"
                    :current-page="pageNo"
                    :page-sizes="[10, 15, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalPage">
                </el-pagination>
            </el-row>
        </div>
        <!-- 删除警告 -->
        <DialogInput ref="remin" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="warning hpx-red-tips"><i class="iconfont icon-tishi"></i></el-row>
                <el-row>
                    是否删除该报价？
                </el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">否</el-button>
                <el-button @click="confirmDelete()" type="primary" class="dialog-button">是</el-button>
            </span>
        </DialogInput>
        <!-- 成功删除弹框 -->
        <DialogInput ref="success" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="hpx-success"><i class="iconfont icon-wancheng"></i></el-row>
                <el-row>已成功删除报价</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="primary" class="dialog-button">我知道了</el-button>
            </span>
        </DialogInput>
        <PccTable v-if="offerType == 'huokuan'"
                :tableData="tableData"
                :detailData="detailData"
                @change="changePage"
                @changes="changeSize"
                :isSelect="isSelect"
                @selection="selection"
                >
                <!-- @remove="click_delete" -->
            <template slot-scope="{scope}">
                <el-button type="primary" plain size="small" @click="showEndorsed(scope.row)">详情</el-button>
            </template>
        </PccTable>
        <!-- 删除警告弹框 -->
        <DialogInput ref="delete" title="提醒">
            <div class="rem-dialog-con">
                <el-row class="warning hpx-red-tips"><i class="iconfont icon-tishi"></i></el-row>
                <el-row>是否删除已选择的{{sectionArr.length}}个报价?</el-row>
            </div>
            <span slot="Remfooter">
                <el-button @click="closeDialog()" type="info" class="hpx-cancel-color dialog-button">否</el-button>
                <el-button @click="confirmDetail()" type="primary" class="dialog-button">是</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import {Vue, Component, Prop} from 'vue-property-decorator'
    import Table from '@component/common/HpxTable.vue'  
    import PccTable from '@component/common/PccTable.vue'
    import moment from 'moment'
    import DialogInput from '@component/common/DialogInput.vue'
    import { hideStr, ellipsis } from '@/util/format'
    import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
    @Component({
        components:{
            Table,
            PccTable,
            DialogInput
        },
        computed: {
            ...mapGetters('enterprise',['getCustomerStatusInfo']),
        }
    })
    export default class WantBill extends Vue {
    //data
        //报价类型
        offerType:string = 'hangkou'
        //行口报价列表
        offerList:any = []
        pageNo = 1
        pageSize = 10
        totalPage = 0
        nowIndex = '0'
        nowDelete:Object = {}
        //货款报价列表
        tableData:TableData = {
            header: [
                {
                    label: '发布时间',
                    key: 'createTime',
                    formatter: (row:any) => moment(row.createTime).format('YYYY-MM-DD HH:mm')
                },
                {
                    label: '票据类型',
                    key: 'billTypeId',
                    formatter: (row:any) => row.billTypeId == 101 ? '电票' : '纸票'
                },
                {
                    label: '票面金额',
                    key: 'min_face_price',
                    formatter: (row:any) => '['+row.minFacePrice+'万,'+row.maxFacePrice+'万]'
                },
                {
                    label: '每十万加',
                    key: 'tenRate'
                },
                {
                    label: '承兑机构',
                    key: 'acceptorTypeName',
                    formatter: (row:any) => ellipsis(row.acceptorTypeName.join('，'), '...', 8)
                }
            ],
            body: [],
            footer: {
                total: 10,
                pageSize: 10,
                currentPage: 1,
            }
        }
        //是否显示勾选框
        isSelect:boolean = false
        //已勾选的数据
        sectionArr = []
        //货款报价详细信息
        detailData = {
            enterpriseName:'',
            wantNumbe: '',
            //tradeTypeId: '',  //交易方式  1801：买断  !1805 带贴
            startTime: '',
            endTime: '',
            falwRequire: [],  //瑕疵可收  1: 可  !1: 不可
            contactName: '',
            contactPhone: '',
            description: '' //原始报价
        }
    //methods
        //切换报价类型
        changeOfferType (tab){
            this.offerType = tab
            tab == 'hangkou' ? this.getOfferList() : this.getPaymentList()
        }
        newOffer (mode) {
            if(this.getCustomerStatusInfo.agencyCertificationStatus != 2){
                this.$alert('请先完成机构认证','提示',{
                    confirmButtonText: '我知道了',
                    customClass: 'custom-message-box'
                })
                return false
            }
            mode == 1 ? this.$router.push('/buyer/newOffer') : this.$router.push('/buyer/newWantBill')
        }
        //获取行口报价列表
        async getOfferList () {
            let params = {
                pageNo: this.pageNo,
                pageSize: this.pageSize
            }
            let res = await this.$http.get('bills/newBillOffer/getBillOfferDetailList',{params})
            if(res.status == 200){
                let list = res.data.items.filter(list => list.pccOfferTimeDtos)
                list.map((list,index) => {
                    list.index = index
                })
                for(let i = 0;i<list.length;i++){
                    for(let k = 0;k<list[i].pccOfferTimeDtos.length;k++){
                        list[i].pccOfferTimeDtos[k].isShow = false
                        list[0].pccOfferTimeDtos[0].isShow = true
                    }
                }
                this.offerList = list
                this.totalPage = res.data.totalNum
            }
        }
        //获取货款报价列表
        async getPaymentList () {
            let params = {
                pageSize: this.tableData.footer.pageSize,
                pageNo: this.tableData.footer.currentPage,
                //orderBy: '+id'
            }
            let res = await this.$http.get('bills/newBillOffer/getWantBillList',{params})
            if(res.status == 200 && res.data){
                this.tableData.body = res.data.items
                this.tableData.footer.total = res.data.totalNum
                this.tableData.footer.pageSize = res.data.pageSize
                this.tableData.body.map((item, index) => {
                    item.index = index
                })
            }
        }
        //修改行口报价
        async editOffer (offer) {
            this.$router.push(`/buyer/newOffer/${offer.id}`)
        }
        //删除行口报价
        deleteOffer (offer) {
            this.nowDelete = offer
            this.$refs['remin'].openDialog()
        }
        //确认删除行口报价
        async confirmDelete () {
            let params = {
                billOfferIds: this.nowDelete.id
            }
            let res = await this.$http.delete('bills/newBillOffer/deleteBillOffer',{params})
            if(res.status == 200){
                this.$refs['success'].openDialog()
                this.getOfferList()
            }
        }
        
        
        //获取货款报价详情
        async showEndorsed (row) {
            let params = {
                wantBillId: row.id
            }
            let res = await this.$http.get('bills/newBillOffer/getBillWantDetail',{params})
            if(res.status == 200){
                this.detailData = res.data
            }
        }
        //显示/隐藏勾选框
        remove () {
            this.isSelect ? this.$refs['delete'].openDialog() : this.isSelect = true
        }
        //取消勾选
        cancelCheck () {
            this.isSelect = false
        }
        //勾选
        selection (item) {
            this.sectionArr = item;
        }
        //删除货款
        // click_delete () {
        //     this.$refs['delete'].openDialog();
        // }
        //确定删除货款
        async confirmDetail () {
            let params = {
                wantBillIds: this.sectionArr.map(item => item.id).join(',')
            }
            let res = await this.$http.delete('bills/newBillOffer/deleteWantBill',{params})
            if(res.status == 200){
                this.$refs['delete'].closeDialog();
                this.getPaymentList()
                this.$refs['success'].openDialog()
            }
        }
        closeDialog () {
            this.$refs['remin'].closeDialog()
            this.$refs['delete'].closeDialog()
            this.$refs['success'].closeDialog()
        }
        //分页回调
        change (page:number) {
            this.pageNo = page
            this.getOfferList()
        }
        changes (size:number) {
            this.pageSize = size
            this.getOfferList()
        }
        changePage (page:number) {
            this.tableData.footer.currentPage = page
        }
        changeSize (size:number) {
            this.tableData.footer.pageSize = size
            
        }
        created () {
            if(this.$route.params.channel == '2'){
                this.offerType = 'huokuan'
            }else{
                this.offerType = 'hangkou'
            }
        }
        mounted () {
            this.getPaymentList()
            this.getOfferList()
        }
    }
</script>

<style lang="scss" scoped>
    .filter_btn{
        padding-top: 16px;
        // border-bottom: none;
        .add_new_offer{
            padding: 8px 15px;
            font-size: 14px;
        }
    }
    .no_offer{
        width: 400px;
        height: 100px;
        background-color: $__color-bg-primary;
        margin: 30px auto;
        line-height: 100px;
        text-align: center;
        font-size: 16px;
        color: $__color-label;
        border-radius: 4px;
    }
    .offer_block{
        margin-bottom: 30px;
        &:last-child{
            margin-bottom: 0px;
        }
        .basic_info{
            width: 100%;
            height: 50px;
            line-height: 50px;
            border-radius: 4px;
            background-color: $__color-bg-unimportance;
            font-size: 14px;
            padding: 0 14px;
            border:1px solid $__color-primary;
            .item{
                margin-right: 2.5%;
                float: left;
                .label{
                    color: $__color-label;
                }
            }
            .delete_offer{
                float: right;
            }
        }
        .term_interval {
            border-radius: 4px;
            border: 1px dashed $__color-line;
            .term_title{
                height: 50px;
                line-height: 50px;
                font-size: 14px;
                border-bottom: 1px solid $__color-line;
                padding-right: 14px;
                .title_text{
                    margin-left: 10px;
                }
                .top_btn{
                    float: right;
                }
            }
            .offer_detail{
                .el-row{
                    height: 50px;
                    line-height: 50px;
                    border-bottom: 1px solid $__color-line;
                    &:last-child{
                        border-bottom: none;
                    }
                    .column{
                        width: 25%;
                        text-align: center;
                        font-size: 16px;
                        color: $__color-show;
                    }
                }
            }
        }
    }
    .iconfont{
        font-size: 14px;
    }
    
</style>
<style lang="scss">
    .pccData.el-table{
        .el-form.el-form--label-left{
            padding: 10px 0;
            padding-left: 125px;
            .el-form-item{
                margin-bottom: 0 !important;
            }
        }
    }
</style>
